<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 事件调用的方法没有参数 -->
    <button @click="btn1Click()">按钮1</button>
    <button @click="btn1Click">按钮1</button>

    <!-- 在事件定义时,写函数时省略了小括号,但方法本身是需要一个参数的,这个时候,vue会默认将浏览器生成的event事件对象作为参数传入到方法中 -->
    <!-- <button @click="btn2Click(123)">按钮2</button> -->
    <!-- <button @click="btn2Click()">按钮2</button> -->
    <button @click="btn2Click">按钮2</button>


    <!-- 方法定义时,我们需要event对象,同时又需要其他参数 -->
    <!-- 在调用方法时,如何手动的获取到浏览器产生的event对象:$event -->
    <button @click="btn3Click(123,$event)">按钮3</button>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        btn1Click() {
          console.log('btn1');
        },
        btn2Click(event) {
          console.log('----------', event)
        },
        btn3Click(abc, event) {
          console.log('+++++', abc, event);
        }
      }
    });

    // 如果函数需要参数,但是没有传入,那么函数的形参为undefined
    // function abc(name) {
    //   console.log(name);
    // }

    // abc()
  </script>
</body>

</html>